<template>
    <div>
        <div :class="$style.top_container">
          <v-header
            :class="$style.header"
            :settings = "settings"
            @leftMenu = '$router.go(-1)'
            @rightMenu = '$_exchangeToEdit'
          >
            <div class="flex-5 text-center b_FS-32 c_white" slot="content">Task Detail</div>
          </v-header>
          <div class="text-center" :class="[$style.top_bg_block, cGradeBackground]">
            <div class="b_FS-36" :class="[$style.themeTitle, cGrade == -1 && 'c_white']" >
              <!--return the book-->
              <input :class='$style.title_input' style="text-align: center;outline: none ; background:transparent; " placeholder='请输入任务标题' class='c_white' v-model='title'>
            </div>
            <img  src="@/assets/images/wave.png" :class="$style.bottom_side" alt="">
          </div>
        </div>
        <div  :class="$style.content_wrap">
          <div class="flex align-center">
            <v-icon name="all c-complete" size="40"></v-icon>
            <div class="b_FS-32 ml16 " ref="gradeText" :class="[$style.grade_text, cGrade == -1 ? 'c-minorText' : 'c-title' ]"  >
              {{ cGradeText }}
            </div>
          </div>
          <div class="flex" :class="$style.grade_wrap" >
              <template v-for="(grade,key) in grades">
                <div @click="$_chooseGrade(grade)"
                     :class="[$style.grade_cube, grade.bgColor, $style[grade.gradeText], cGrade == key && $style.side]" >
                  <div :class="$style.side"></div>
                </div>
              </template>
          </div>
          <div class="flex align-center ptb15" :class="$style.mb20">
            <v-icon name="rili c-complete" size="36"></v-icon>
            <div class="b_FS-30 ml16 c-title" @click="$refs.picker.open()" >
              <!--2016-10-17 15:00-->
              {{ dateFormat(datePickerValue, 'yyyy-MM-dd hh:mm') }}
              <!--{{ dateFormat(datePickerValue) }}-->
            </div>
          </div>
          <div class="flex align-center ptb15" :class="$style.mb20">
            <v-icon name="dingwei c-complete" size="36"></v-icon>
            <input v-model="location" class="b_FS-30 ml16 c-title" type="text" placeholder="library of Beijing University" >
          </div>
          <div class="flex  ptb15" :class="$style.mb20">
            <v-icon name="beizhu c-complete" size="32"></v-icon>
            <textarea
              v-model="desc"
              class="b_FS-30 ml16 c-title" :class="$style.desc" placeholder="Also borrowed two books from the library last week, and then went to classmates home take course books." cols="30" rows="10"></textarea>
          </div>

          <!--mint-ui-->
          <mt-datetime-picker
            ref="picker"
            type="datetime"
            @confirm="$_confirmDatePicker"
            :startDate = 'currentDate'
            v-model="datePickerValue"
          >
          </mt-datetime-picker>

        </div>
    </div>
</template>
<script type="text/babel">
    import Vue from 'vue'
    import { DatetimePicker, Toast, MessageBox } from 'mint-ui'
    Vue.component(DatetimePicker.name, DatetimePicker)
    // util
    import { dateFormat } from '@/util/transform'
    export default {
        name: "taskDetail",
        data() {
            return {
              settings:{
                leftIcon : 'zhixiang-zuo c_white',
                rightIcon : 'zhiweiwancheng c_white',
                leftSize: 60 ,
                rightSize : 40
              },
              isShowSearch : false ,
              title : '' ,
              cGrade: -1,
              cGradeText: 'Choose a grade for task',
              cGradeBackground : 'c-default-bg',
              grades:[
                {
                  type: 0,
                  bgColor: 'c-special-bg',
                  gradeText: 'Special'
                },
                {
                  type: 1,
                  bgColor: 'c-main-bg',
                  gradeText: 'Importance'
                },
                {
                  type: 2,
                  bgColor: 'c-general-bg',
                  gradeText: 'General'
                },
                {
                  type: 3,
                  bgColor: 'c-temporary-bg',
                  gradeText: 'Temporary'
                },
                {
                  type: 4,
                  bgColor: 'c-delay-bg',
                  gradeText: 'Delay'
                },
                {
                  type: 5,
                  bgColor: 'c-complete-bg',
                  gradeText: 'Complete'
                }
              ],
              mode : 'add',  // edit
              status : 0 ,
              location : '' ,
              date: '' ,
              desc : '',
              datePickerValue : '' ,
              currentDate: new Date()
            }
        },
        async created() {
          if( this.$route.query.taskId ){
            this.mode = 'edit'
            this.settings.rightIcon = '75bianji c_white'  // 编辑后提交
            // ... ajax
            const taskId = this.$route.query.taskId
            let res = await this.$get(`/api/task/${taskId}`,{})
            if( res.code == 0 ){
                const { title, arrivalTime, desc, grade , location } = res.data
                this.title = title
                this.cGrade = grade
                this.cGradeText = this.grades[grade].gradeText
                this.cGradeBackground = this.grades[grade].bgColor
                this.desc = desc
                this.location = location
                this.datePickerValue = new Date(arrivalTime)
            }

          }
          else{
            this.mode = 'add'
            this.datePickerValue = new Date()
          }
        },
        mounted() {},
        beforeDestroy() {
        },
        computed: {},
        methods: {
          dateFormat : dateFormat ,
          $_exchangeToEdit(){
            if( this.mode == 'add' ){
              this.$_createTask()
            }
            else{
              if( this.settings.rightIcon === '75bianji c_white'  ){
                this.settings.rightIcon = 'zhiweiwancheng c_white'
              }
              else{
                this.$_updateTask()
              }
            }

          },
          $_chooseGrade(grade){
            // 飘入动画
            this.$refs.gradeText.className += ' garline'
            setTimeout(()=>{
              const ClassName = this.$refs.gradeText.className.replace('garline', '')
              this.$refs.gradeText.className = ClassName
            },1000)
            this.cGradeText = grade.gradeText
            this.cGrade = grade.type
            this.cGradeBackground = grade.bgColor
          },
          $_confirmDatePicker(val){
            console.log( val )
          },
          /**
           * 新建任务
           * */
          async $_createTask (){
/*
            grade: { type: String, maxlength: 20 },
            desc: { type: String, maxlength: 20 },
            location : { type: String, maxlength: 20 },
            arrivalTime : { type: Number, maxlength: 20 },
            create_date: { type: Date },
            update_date: { type: Date }
*/
            let res = await this.$post('/api/task/create', {
              title: this.title ,
              grade : this.cGrade ,
              desc : this.desc ,
              location: this.location ,
              arrivalTime : +this.datePickerValue,
            }).catch(err=>{
              Toast(err.msg)
            })
            if(res){
              Toast('创建任务成功了，主人')
              MessageBox.confirm('主人，要返回首页吗?').then(action => {
                this.$router.push('/task')
              }).catch(()=>{
                Toast('已帮你清扫干净，主人')
                this.title = ''
                this.cGrade = -1
                this.cGradeText = 'Choose a grade for task'
                this.cGradeBackground = 'c-default-bg'
                this.status = 0
                this.location = ''
                this.date= ''
                this.desc = ''
                this.datePickerValue = ''

              })
            }

          },
          async $_updateTask (){
            const taskId = this.$route.query.taskId
            let res = await this.$patch(`/api/task/${taskId}`, {
              title: this.title ,
              grade : this.cGrade ,
              desc : this.desc ,
              location: this.location ,
              arrivalTime : +this.datePickerValue,
            }).catch(err=>{
              Toast(err.msg,1000)
            })
            if(res){
              Toast('提交成功',1000)
              this.$router.push('/task')
            }

          }
        }
    }
</script>

<style module lang='scss'>
  .top_container{
    height: 450px ;
    width: 100% ;
    position: relative;
    /*box-shadow: 0 10px 20px #e0e0e0;*/
    .top_bg_block{
      height: 450px ;
      width: 100%;
      position: absolute;
      top: 0 ;
      left: 0 ;
      transition: all 1s;
      //background: #26E7F8;
      z-index: 1;
    }
    .title_input::-webkit-input-placeholder {
      /* placeholder颜色  */
      color: rgba(255,255,255,.8);
      /* placeholder字体大小  */
      //font-size: 40px;
      /*background-color: transparent;*/
      /* placeholder位置  */
    }
    .header{
      position: absolute;
      top: 0;
      left: 0 ;
      z-index:2 ;
    }
    .themeTitle{
      margin-top: 180px;
    }
    .bottom_side{
      width: 100%;
      height: 120px;
      position: absolute;
      bottom: 0;
      left: 0;
      z-index: 2;
    }
  }
  .content_wrap{
    padding: 45px 65px 20px;
    box-sizing: border-box;
    .grade_text{
      transition: all 1s ;
    }

    .grade_wrap{
      text-align: center;
      justify-content: center;
      height: 82px;
    }
    .grade_cube{
      width: 30px;
      height: 30px ;
      border-radius: 15%;
      margin: 20px 13px;
      border: 3px solid transparent;
      transition: all .8s;
      &.Special{
        box-shadow: 0 0 3px 3px #CF98F3;
      }
      &.Importance{
        box-shadow: 0 0 3px 3px #F97B91;
      }
      &.General{
        box-shadow: 0 0 3px 3px #84C3F8;
      }
      &.Temporary{
        box-shadow: 0 0 3px 3px #ABE08E;
      }
      &.Delay{
        box-shadow: 0 0 3px 3px #FCDB7A;
      }
      &.Complete{
        box-shadow: 0 0 3px 3px #BCC4C6;
      }
      &.side{
        // border
        box-sizing: border-box;
        border: 3px solid white;
      }
    }
  }
  .desc{
    width: 500px ;
    line-height: 1.2;
  }
  .mb20{
    margin-bottom: 20px;
  }

</style>
<style >

  /* 可以设置不同的进入和离开动画 */
  /* 设置持续时间和动画函数 */
  .slide-fade-enter-active { transition: all .3s ease;
    transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
  }
  .slide-fade-leave-active { transition: all .3s ease;
    transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
  }
  .slide-fade-enter, .slide-fade-leave-to
    /* .slide-fade-leave-active for below version 2.1.8 */ {
    transform: translateX(10px);
    opacity: 0;
  }


  .garline{
    animation: turnBright 1s;
  }
  @keyframes turnBright {
    from{opacity: 0;transform: translateX(50%);}
    to{opacity: 1;transform:translateX(0%);}
  }
</style>
